
<!--互联网售票机数据录入-->
<template>
  <div class="shouPiaoYuanCYQRTZ">
    <basic-container>
      <avue-crud
        ref="shouPiaoYuanCYQRTZ"
        :option="option"
        :table-loading="listLoading"
        :data="list"
        :page.sync="page"
        @search-change="handleFilter"
        @selection-change="selectionChange"
        @refresh-change="getList"
        @on-load="refreshChange">
        <template slot-scope="scope" slot="menuRight">
          <el-button type="primary"  size="mini" @click="exportData">导出</el-button>

        </template>
        <template slot-scope="scope" slot="lineCodeSearch">
          <el-select v-model="searchForm.lineCode" placeholder="请选择" style="width: 150px" @change="changeLine" clearable filterable>
            <el-option
              v-for="(item,index) in lineCodes"
              :key="index"
              :label="item.name"
              :value="item.code">
            </el-option>
          </el-select>
        </template>
        <template slot-scope="scope" slot="stationCodeSearch">
          <el-select v-model="searchForm.stationCode" placeholder="请选择" style="width: 150px" @change="changeStation" clearable filterable>
            <el-option
              v-for="(item,index) in stationCodes"
              :key="index"
              :label="item.name"
              :value="item.code">
            </el-option>
          </el-select>
        </template>
        <template slot-scope="scope" slot="conductorPersonSearch">
          <el-select v-model="searchForm.conductorPersonCode" placeholder="请选择" style="width: 150px" filterable>
            <el-option
              v-for="(item,index) in userList"
              :key="index"
              :label="item.nikename"
              :value="item.userCode">
            </el-option>
          </el-select>
        </template>
        <template slot-scope="scope" slot="search">
          <!--          <el-form-item label="开始时间">-->
          <!--            <el-date-picker v-model="searchForm.startTime" type="date" placeholder="选择日期">-->
          <!--            </el-date-picker>-->
          <!--          </el-form-item>~-->
          <!--          <el-form-item label="结束时间">-->
          <!--            <el-date-picker v-model="searchForm.endTime" type="date" placeholder="选择日期">-->
          <!--            </el-date-picker>-->
          <!--          </el-form-item>-->
        </template>
        <template slot="searchMenu" slot-scope="{row,size}">
          <el-button :size="size" @click="()=>{setSearchFiledsEmpty(row);setSearchFiledsEmpty(searchForm)}" icon="el-icon-delete">清空</el-button>
        </template>
        <template slot-scope="scope" slot="menu">
          <el-button type="text" size="small"
                     plain @click.stop="previewOp(scope.row)">预览</el-button>
        </template>
      </avue-crud>
    </basic-container>
  </div>

</template>

<script>
import {mapGetters} from 'vuex';
import moment from 'moment';
import {
  getgetStationCodes,
  getLineCodes, getSysUserToLS, setSearchFiledsEmpty
} from "@/api/subwayRat/commonCheck";

import {exportDataToExcel} from "@/api/subwayRat/exportSelf";
import {
} from "@/api/stationTiecketManager/xianWngCJXXQR/shouPiaoYuanPKCY/shouPiaoYuanBKQRTZ/otherYunYingZXDLCK";
import {
  getSwAuTvmShortList,
  TVM_other_RYDLCK_option
} from "@/api/subwayRat/swAuTvm/tvmPaymentNotice";
export default {
  name: 'shouPiaoYuanCYQRTZ',
  components:{

  },
  data() {
    return {
      prevDialogVisible:false, //yulan
      option: {},
      listLoading: true,
      lineCodes:[],
      stationCodes:[],
      userList:[],
      selectKeys:[],
      selectKeyVals:[],
      searchForm:{
        lineCode:'9',
        stationCode:'',
        conductorPersonCode:''
      },
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 20, // 每页显示多少条,
        isAsc: false// 是否倒序
      },
      param:{
        replyPeriod:"",//回复期限
        appealReply:'',//申诉回复
      },
      list : []
    }
  },
  computed: {
    ...mapGetters(['permissions']),
  },
  watch: {
  },
  created() {
    this.changeLine("9")
    this.option=TVM_other_RYDLCK_option;
  },
  methods: {
    setSearchFiledsEmpty,
    moment,
    refreshChange() {
      this.getList()
    },
    getList() {
      this.listLoading = true;
      Object.assign(this.searchForm,this.page);
      this.searchForm.combinStatus=0;
      getSwAuTvmShortList(this.searchForm).then((response)=>{
        this.list = response.data.data.list;
        this.listLoading = false;
        this.page.total=response.data.data.pageInfo.total;
      });
    },
    previewOp(row){
      this.prevDialogVisible=true;
      this.$nextTick(()=>{
        this.$refs.prev.dialogVisible=true;
        this.$refs.prev.recallShow(row,this);
      })
    },
    selectionChange(list){
      this.selectKeys=list;
      this.selectKeyVals=[];
      for(let i=0;i<list.length;i++){
        this.selectKeyVals.push(list[i].id);
      }
    },
    handleFilter(params, done) {
      Object.assign(this.searchForm,params);
      this.getList()
      done()
    },
    async exportData(){ // 导出
      let p={};
      Object.assign(p,this.searchForm);
      p.pageNo=1;
      p.pageSize=1000000000;
      if(this.selectKeys.length>0){
        let newData = JSON.parse(JSON.stringify(this.selectKeys));
        exportDataToExcel(newData,this.option.column,'售票员差异确认通知-其他运营中心人员登录查看');
      }else {
        let res=await getSwAuTvmShortList(p);
        let data = res.data.data.list;
        exportDataToExcel(data,this.option.column,'售票员差异确认通知-其他运营中心人员登录查看');
      }
    },
    changeLine(v){ //改变线路时
      getgetStationCodes(v).then(res=>{
        this.stationCodes=res;
        this.searchForm.stationCode='';
        this.searchForm.conductorPersonCode = '';
      })
    },
    changeStation(v){
      getSysUserToLS({stationCode:v}).then((res)=>{
        this.userList=res.data.data;
        this.searchForm.conductorPersonCode = '';
      });
    },
  },
  mounted() {
    getLineCodes().then(res=>{ //获取线路
      this.lineCodes=res;
    });
  }
}
</script>
<style lang="scss">
.huLianWangShouPiaojiDataInput {
  height: 100%;

  &__tree {
    padding-top: 3px;
    padding-right: 20px;
  }

  &__main {
    .el-card__body {
      padding-top: 0;
    }
  }
  .avue-form__group{

  }
}
</style>
